<template>
  <Nav_bar :title="'忘记密码'" />
  <div class="box">
    <form @submit="" @reset="" class="_form">
      <div class="form_phone">
        <text class="icon phone"></text>
        <input
          class="phone_input"
          type="text"
          v-model.trim="loginForm.phone"
          placeholder="请输入您的手机号码"
          maxlength="11"
        />
      </div>
      <div class="form_lock">
        <text class="icon yan_zheng_code"></text>
        <input
          class="lock_input"
          v-model.trim="loginForm.code"
          type="text"
          placeholder="请输入验证码"
          maxlength="4"
        />
        <button
          type="button"
          class="_code"
          :disabled="isDisabled"
          @click.stop="getPhoneCode()"
          :style="{
            color: isCodeStyle ? '' : '#A8A8A8',
          }"
        >
          {{ btnText }}
        </button>
      </div>
      <div class="form_lock">
        <text class="icon lock"></text>
        <input
          class="lock_input"
          v-model.trim="loginForm.newPaw"
          type="password"
          autocomplete="new-password"
          placeholder="请输入新密码"
          maxlength="16"
          minlength="4"
        />
      </div>
      <div class="form_lock">
        <text class="icon lock"></text>
        <input
          class="lock_input"
          v-model.trim="loginForm.twoNewPaw"
          type="password"
          autocomplete="new-password"
          placeholder="请再次输入新密码"
          maxlength="16"
          minlength="4"
        />
      </div>
      <van-button
        type="primary"
        round
        size="normal"
        color="linear-gradient(to right, #66dfbc, #14c691)"
        :disabled="!disabled"
        :loading="loading"
        :block="true"
        @click="skip_login()"
      >
        提交
      </van-button>
    </form>
  </div>
  <van-popup v-model:show="showCenter" round :close-on-click-overlay="false" class="van_popup">
    <div class="popup_box">
      <div class="_title1">温馨提示！</div>
      <div class="_title2">修改密码成功，请重新登录</div>
      <van-button class="logOut" type="default" block @click="logOut()">登录</van-button>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, reactive, onUpdated, computed } from 'vue'
import { useCountButton } from '@/hooks/common'
import { encryption } from '@/utils/rsa_encipher'
import { postPhoneCodeApi, postResetApi } from '@/api/user/user'
import { useRouter } from 'vue-router'
import { usePhoneInfoStore, useUserInfoStore } from '@/stores'
import { Msg } from '@/utils/tools'

const phoneInfoStore = usePhoneInfoStore()
const userInfoStore = useUserInfoStore()

const { btnText, disabled: isDisabled, startCount } = useCountButton()
const loginForm = ref({
  phone: phoneInfoStore.phone || '',
  code: '',
  newPaw: '',
  twoNewPaw: '',
})
const disabled = ref(false)
const $router = useRouter()
const loading = ref(false)
const showCenter = ref(false)

onUpdated(() => {
  disabled.value =
    loginForm.value.phone.length >= 11 &&
    loginForm.value.code.length >= 4 &&
    loginForm.value.newPaw.length <= 16 &&
    loginForm.value.newPaw.length >= 6 &&
    loginForm.value.twoNewPaw.length <= 16 &&
    loginForm.value.twoNewPaw.length >= 6
      ? true
      : false
})

/** 获取验证码 */
const getPhoneCode = async () => {
  // 正则校验
  let reg = /^1[3-9]\d{9}$/
  if (!reg.test(loginForm.value.phone)) {
    return Msg('请输入正确的手机号')
  }
  const res = await postPhoneCodeApi({ phone: loginForm.value.phone, type: 2 })
  if (res.code === 200) {
    startCount()
    Msg('验证码已发送')
  }
}

/** 判断验证码样式 */
const isCodeStyle = computed(() => {
  return loginForm.value.phone.length >= 11 && btnText.value === '获取验证码' ? true : false
})

/**提交并且跳转到登录页 */
const skip_login = async () => {
  if (loginForm.value.newPaw !== loginForm.value.twoNewPaw) return Msg('两次密码输入不一致')
  loading.value = true
  const param = {
    phone: loginForm.value.phone,
    captcha: loginForm.value.code,
    newPassword: encryption(loginForm.value.newPaw),
    repeatNewPassword: encryption(loginForm.value.twoNewPaw),
  }
  const res = await postResetApi(param).finally(() => {
    loading.value = false
  })
  if (res.code === 200) {
    showCenter.value = true
  }
}
/** 点击跳转回登录页面 */
const logOut = () => {
  userInfoStore.deleteUserInfo()
  userInfoStore.deleteToken()
  localStorage.removeItem('userInfo')
  $router.push('/login')
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: calc(100% - 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to top, #fff, #effaf6);
  padding-top: 19px;
}
.vanNavBar {
  background: #f0faf7 !important;
}
:deep(.van-nav-bar__title) {
  color: #000 !important;
}
:deep(.van-icon) {
  color: #000 !important;
}
._form {
  .form_phone,
  .form_lock {
    width: 299px;
    height: 44px;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 12px;
    .phone {
      font-size: 22px;
      color: #09d336;
      margin: 0 5px 0 3px;
    }
    .lock,
    .yan_zheng_code {
      font-size: 16px;
      color: #09d336;
      margin: 0 8px 0 6px;
    }
    .phone_input,
    .lock_input {
      flex: 1;
    }
    ._code {
      color: #06cd93;
      border-left: 1px solid #a8a8a8;
      padding: 0 7px 0 9px;
      background-color: transparent;
    }
  }
}
.user_agreement {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  color: var(--c9);
  margin-bottom: 39px;
  ._checkbox {
    width: 15px;
  }
  .user_agreement_text {
    display: flex;
    width: 100%;
    font-size: var(--fs10);
    margin-left: 4px;
    .agreement {
      color: #15c691;
    }
  }
}
.popup_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .logOut {
    width: 112px;
    height: 34px;
    font-size: 14px;
    color: #fff;
    border-radius: 6px;
    background: linear-gradient(90deg, #64e0bb 0%, #1ac894 100%);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.09));
  }
  ._title1 {
    font-size: 16px;
    color: #333;
  }
  ._title2 {
    font-size: 12px;
    color: #999;
    margin: 8px 0px 20px;
  }
}
.van_popup {
  padding: 32px 75px 20px;
}
</style>
